<template>
  <div :class="{bodyBg: isBodyBg}">
    <!--*************************档案类型卡片***************************-->
    <div v-if="this.$store.getters.cardState" class="box">
      <div @click="getId(item)" v-for="(item, index) in archTypeList" :key="index">
        <el-card class="box-card" shadow="hover">
          <div>{{item.typeName}}</div>
        </el-card>
      </div>
    </div>
    <!--*******************************案卷搜索首页内容************************* -->
    <div v-if="!this.$store.getters.cardState">
      <!--********************头部搜索框********************* -->
      <div class="bg-img">
        <el-row style="padding-top:40px; padding-bottom:30px" type="flex" justify="center">
          <el-col :span="12" align="middle">
            <div style="padding-bottom:20px;">{{typeName}}</div>
            <div>
              <el-radio-group v-model="radio" size="mini">
                <el-radio label="1" v-if="selectType !== '3'">案卷检索</el-radio>
                <el-radio label="2">文件检索</el-radio>
                <el-radio label="3">全文检索</el-radio>
              </el-radio-group>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12" :offset="4">
            <el-form :inline="true" label-width="68px">
              <el-form-item prop="searchValue">
                <el-input
                  v-model="searchValue"
                  placeholder="请输入题名搜索"
                  clearable
                  style="width:400px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="medium "
                  @click="handleQuery"
                >搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!--********************案卷级********************* -->
      <ol v-loading="loading">
        <div :key="item.id" v-for="(item, index) in list">
          <el-row type="flex" justify="center">
            <el-col :span="10" :offset="2">
              <li v-if="tbType == '1'">
                <span v-if="item.acFileTitle" :class="{colorRed: isCaseTitle}">{{item.acFileTitle}}</span>
                <span v-if="item.acDocNum" >档案，档号{{item.acDocNum}}，</span>
                <span v-if="item.acFullAnces">全宗号{{item.acFullAnces}}，</span>
                <span v-if="item.qzsj">租赁起止时间<span :class="{colorRed: isCaseTitle}">{{item.qzsj}}，</span></span>
                实体借阅状态为
                <span
                  style="color:#fa9914"
                >{{item.borwStatus == 1 ? "已借出": "未借出"}}</span>。
              </li>
              <li v-else>
                <span v-if="item.fileTitle" :class="{colorRed: isCaseTitle}">{{item.fileTitle}}</span>
                <span v-if="item.docNum">档案，档号{{item.docNum}}，</span>
                <span v-if="item.fullAnces">全宗号{{item.fullAnces}}，</span>
                实体借阅状态为
                <span
                  style="color:#fa9914"
                >{{item.borwStatus == 1 ? "已借出": "未借出"}}</span>。
              </li>
            </el-col>
            <el-col :span="6">
              <el-row>
                <el-col :span="14" :offset="2">
                  <el-button
                    type="success"
                    icon="el-icon-shopping-cart-2"
                    round
                    plain
                    @click="handleAddCart(item)"
                  >加入借阅车</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
        <el-empty :image-size="200" v-if="noData" description="暂无数据"></el-empty>
      </ol>
      <!--*******************************借阅车内容************************* -->
      <!-- <div style="margin:20px" v-if="this.$store.getters.cardState">
        <component :is="comName"></component>
      </div>-->
    </div>
  </div>
</template>

<script>
import { addBorcart } from "@/api/system/borcart";
import { addSearch } from "@/api/system/search";

import { listType } from "@/api/system/type";
import { listTable } from "@/api/tool/table";

import {
  listFileA,
  getFileA,
  addFileA,
  updateFileA,
  delFileA,
  updateApply,
  updateApprove,
  updateReject,
  multFile
} from "@/api/system/archFileA";

export default {
  data() {
    return {
      /***********************档案分类卡片******************/
      archTypeList: null, // 档案类型列表
      tbNameFile: null, // 文件级表名称
      tbNameArch: null, // 案卷级表名称
      totalArch: 0, // 搜索数据总数
      selectType: null, // 卡片点击选择类型
      tbType: null, // 表类型
      tbName: null, // 表名称，用于添加借阅车
      typeName: null, // 档案名称
      typeId: null, // 档案类型id
      /***************首页案卷搜索内容********************/
      // 项目根路径
      baseUrl: process.env.VUE_APP_BASE_API,
      // 搜索请求变量
      fileTitle: null,
      searchValue: null,
      // 查询参数
      queryParams: {},
      // 搜索类型单选框
      radio: "1",
      // 查询案卷级返回结果
      list: [],
      //红色样式
      isCaseTitle: false,
      // 首页背景图片
      isBodyBg: true,
      // 加载动画
      loading: false,
      noData: true
    };
  },
  created() {
    // 获取档案分类
    this.getType();
  },
  watch: {
    cardState: {
      handler(newData) {
        if (newData == true) {
          //如果卡片显示，重置一些变量
          this.isBodyBg = true;
          this.noData = true;
          this.list = {};
          this.selectType = null;
        } else {
          this.isBodyBg = false;
        }
      },
      deep: true
    }
  },
  computed: {
    cardState() {
      return this.$store.getters.cardState; // 卡片显示状态
    }
  },
  methods: {
    /***********************档案分类卡片******************/
    getType() {
      listType({ status: "0", tbFlag: '1', isCreateTb: '1' }).then(response => {
        this.archTypeList = response.data;
      });
    },
    // 点击档案类型卡片
    getId(item) {
      // 档案名称
      this.typeName = item.typeName;
      // 一级菜单，传自己。查询record_table表
      this.typeId = item.typeId;
      this.getarchListTable(item.typeId);
    },
    // 获取表集合
    getarchListTable(tb_typeId) {
      listTable({ typeId: tb_typeId }).then(response => {
        let tableList = response.rows;
        // 跳转组件
        // 1. 长度为0，未建表
        // 2. 长度为1，并且表类型为3，跳转独立文件组件
        // 3. 否则，跳转案卷案卷-卷内组件
        // tbType 表类型。1：案卷管理表，2：卷内文件表，3：独立文件表
        if (tableList.length == 0) {
          this.$message({
            type: "warning",
            message: "该分类下未建表",
            duration: 1000
          });
        } else if (tableList.length == 1 && tableList[0].tbType === "1") {
          this.$message({
            type: "warning",
            message: "已建案卷表，未建卷内表",
            duration: 1000
          });
        } else if (tableList.length == 1 && tableList[0].tbType === "3") {
          // 修改档案分类卡片显示状态
          this.$store.commit("SET_CARD_STATE", false);
          // 独立文件
          this.selectType = "3";
          this.tbNameFile = tableList[0].tbName;
        } else if (
          // 案卷卷内文件
          tableList.length == 2 &&
          tableList[0].tbType === "1" &&
          tableList[1].tbType === "2"
        ) {
          // 修改档案分类卡片显示状态
          this.$store.commit("SET_CARD_STATE", false);
          this.tbNameArch = tableList[0].tbName;
          this.tbNameFile = tableList[1].tbName;
        } else {
          this.$message({
            type: "warning",
            message: "案卷-卷内表异常",
            duration: 1000
          });
        }
      });
    },
    /*************************首页搜索内容***********************/
    // 搜索
    handleQuery() {
      if (this.searchValue != null) {
        this.fileTitle = this.searchValue;
        if (this.radio === "1" && this.selectType !== "3") {
           // 按案卷检索
          this.tbType = "1"; // 用于添加借阅车
          this.tbName = this.tbNameArch; // 用于添加借阅车
          this.loading = true;
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 100;
          this.queryParams.tbName = this.tbNameArch;
          this.queryParams.acFileTitle = this.searchValue;
          this.queryParams.archStatus = "2";
          listFileA(this.queryParams).then(response => {
            // 是否隐藏暂无数据提示
            if (response.data.list.length == 0) {
              this.noData = true;
            } else {
              this.noData = false;
            }
            this.loading = false;
            this.isCaseTitle = true;
            this.list = response.data.list;
            this.totalArch = response.data.total;
            //this.addSearchData();
          });
        } else if (this.radio === "2") {
          // 按文件检索
          if (this.selectType === "3") {
            this.tbType = "3"; // 用于添加借阅车。
          } else {
            this.tbType = "2";
          }
          this.tbName = this.tbNameFile; // 用于添加借阅车
          this.loading = true;
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 100;
          this.queryParams.tbName = this.tbNameFile;
          this.queryParams.fileTitle = this.searchValue;
          this.queryParams.archStatus = "2";
          listFileA(this.queryParams).then(response => {
            this.loading = false;
            this.isCaseTitle = true;
            this.list = response.data.list;
            this.totalArch = response.data.total;
            //this.addSearchData();
          });
        } else if (this.radio === "3") {
          this.loading = false;
          // 按全文检索
          console.log("查询全文");
        }
        this.resetQuery(); // 重置查询参数
      }
    },
    /** 重置查询参数 */
    resetQuery() {
      this.queryParams = {}; // 重置查询参数
      this.searchValue = null; // 重置查询关键字
    },
    // 循环插入搜索量数据
    addSearchData() {
      for (let i in this.list) {
        addSearch({
          archId: this.list[i].id,
          typeId: this.list[i].typeId
        });
      }
    },
    // 加入借阅车
    handleAddCart(item) {
      this.queryParams = {};
      if(this.tbType == '1'){
        this.queryParams.fileTitle = item.acFileTitle; // 题名
        this.queryParams.docNum = item.acDocNum; // 档号
        this.queryParams.fullAnces = item.acFullAnces; // 全宗号
      }else{ 
        this.queryParams.fileTitle = item.fileTitle; // 题名
        this.queryParams.docNum = item.docNum; // 档号
        this.queryParams.fullAnces = item.fullAnces; // 全宗号
      }
      this.queryParams.archivesId = item.id; // 案卷、文件id
      this.queryParams.tbName = this.tbName; // 表名称
      this.queryParams.tbType = this.tbType; // 表类型
      this.queryParams.typeName = this.typeName; // 档案名称
      this.queryParams.typeId = this.typeId; // 档案类型id
      addBorcart(this.queryParams).then(response => {
        this.$message({
          type: "success",
          message: "添加成功",
          duration: 1000
        });
        const cartNum = this.$store.state.borcart.cartNum + 1;
        this.$store.commit("SET_CART_NUM", cartNum);
      });
      this.resetQuery();
    }
  }
};
</script>

<style lang="scss" scoped>
.bodyBg {
  background-image: url("../../../assets/images/body_bg.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.bg-img {
  height: 100%;
  background-image: url("../../../assets/images/bg-client.jpeg");
  background-size: cover;
}
.colorRed {
  color: red;
}
.row-bg {
  padding: 10px 0;
  background-color: #67c23a;
}
.box-card {
  width: 380px;
  height: 200px;
  margin: 10px;
  margin-top: 40px;
  cursor: pointer;
  background: url("../../../assets/images/card_bg.jpg");
}
.box-card:hover {
  width: 400px;
  height: 220px;
}
.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  line-height: 170px;
}
</style>